<html>
	<head>
		
		<title>example</title>
		<link type="text/css" href="../jquery/development-bundle/themes/base/jquery.ui.all.css" rel="stylesheet" />
		<script type="text/javascript" src="../jquery/jquery-1.4.2.min.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/external/jquery.bgiframe-2.1.1.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.core.js.nocompile"></script>
	
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.widget.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.mouse.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.button.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.draggable.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.position.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.resizable.js.nocompile"></script>
	
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.ui.dialog.js.nocompile"></script>
		<script type="text/javascript" src="../jquery/development-bundle/ui/jquery.effects.core.js.nocompile"></script>

		<script type="text/javascript" src="raphael-min.js.nocompile"></script>
		<script type="text/javascript" src="raphael.draggable.js"></script>
		<script type="text/javascript" src="cfphdraw.js.nocompile"></script>
		
		<style type="text/css">
			body { font-size: 62.5%; }
			label, input { display:block; }
			input.text { margin-bottom:12px; width:95%; padding: .4em; }
			fieldset { padding:0; border:0; margin-top:25px; }
			h1 { font-size: 1.2em; margin: .6em 0; }
			div#users-contain { width: 350px; margin: 20px 0; }
			div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
			div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
			.ui-dialog .ui-state-error { padding: .3em; }
			.validateTips { border: 1px solid transparent; padding: 0.3em; }
		</style>
		
		<script type="text/javascript">
		</script>


		<script type="text/javascript">
			function testOk() {
				if (CFPH.Draw.isConnectionActivated("7","Adder","a")
				    && CFPH.Draw.isConnectionActivated("8","Adder","b")
				    && CFPH.Draw.connectionExists("Adder","Printer","inp")) {
				    
					alert("the number 15 is printed");
					CFPH.Draw.deactivateAllConnections();
				}
			}
			
			window.onload = function(){
				$(function(){
					// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
					$("#dialog-form").dialog("destroy");
					
					$("#dialog-form").dialog({
						autoOpen: false,
						height: 300,
						width: 350,
						modal: true,
						close: function(){
							allFields.val('').removeClass('ui-state-error');
						}
					});
				});
				
				var paper = Raphael(0, 0, document.body.clientWidth, document.body.clientHeight);

				CFPH.Draw.init(paper);
				
				CFPH.Draw.setListener({
					inOutConnected: function(from, to, paramName) {
						if (CFPH.Draw.connectionExists(from, to, paramName))
							CFPH.Draw.removeConnection(from, to, paramName);
						else
							CFPH.Draw.createConnection(from, to, paramName);
							
						testOk();
					}
				});

				CFPH.Draw.addService(0, 0, "7", [], [], true, "serviceObj...", function() { });
				CFPH.Draw.addService(120, 0, "8", [], [], true, "serviceObj...", function() { });
				CFPH.Draw.addService(0, 200, "Printer", ["inp"], [], false, "serviceObj...", function() { });
				CFPH.Draw.addService(60, 100, "Adder", ["a", "b"], [], true, "serviceObj...", function() { });
				CFPH.Draw.addService(120, 200, "Emailer", ["inp", "a"], ["address","abe"], false, "serviceObj...", function() { });
				
				CFPH.Draw.setTemplate("Emailer", "address", "freeall@gmail.com");

				CFPH.Draw.createConnection("7", "Adder", "a");
				CFPH.Draw.createConnection("8", "Adder", "b");

//				setTimeout(function() { CFPH.Draw.activateConnection("7", "Adder", "a"); testOk(); }, 3000);
//				setTimeout(function() { CFPH.Draw.activateConnection("8", "Adder", "b"); testOk(); }, 10000);
			}
		</script>
	</head>
	<body>
		<div id="dialog-form" title="Set value">
			<form>
				<fieldset>
					<label for="value"><span id="paramName">Value</span>:</label>
					<input type="text" name="value" id="value" class="text ui-widget-content ui-corner-all" />
				</fieldset>
			</form>
		</div>
			
	</body>
</html>
